<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>返回</v-ons-back-button>
      </div>
      <div class="center">订单详情</div>
    </v-ons-toolbar>
    <div class="container">

      <div id="wx-map" class="wx-map"></div>
      <div class="refurbish">
        <img src="../../assets/resource/service/locations_detail/refurbish.png" alt="">
      </div>


      <div class="info-group">
        <div class="address">
          <div class="address-item">
            <div class="left">
              <img class="address-icon" src="../../assets/resource/service/locations_detail/address-icon1.png" alt="">
            </div>
            <div class="center">
              <p>地址1</p>
              <p>姓名(先生) 12345678912</p>
            </div>
            <div class="right">
              <img class="phone-icon" src="../../assets/resource/service/locations_detail/phone-icon.png" alt="">
            </div>
          </div>
          <div class="address-item">
            <div class="left">
              <img class="address-icon" src="../../assets/resource/service/locations_detail/address-icon2.png" alt="">
            </div>
            <div class="center">
              <p>地址1</p>
              <p>姓名(先生) 12345678912</p>
            </div>
            <div class="right">
              <img class="phone-icon" src="../../assets/resource/service/locations_detail/phone-icon.png" alt="">
            </div>
          </div>
        </div>
      </div>

      <div class="tabbar-bottom">
        <button>抢单</button>
      </div>
    </div>
  </v-ons-page>
</template>

<script>
  export default {
    mounted() {
      let map = new qq.maps.Map(document.getElementById("wx-map"), {
        zoom: 14,
        // 地图的中心地理坐标。
        center: new qq.maps.LatLng(39.916527, 116.397128),
        zoomControl: false,
        mapTypeControl:false,
      });
    }
  }
</script>

<style scoped lang="less">
  @import "../../assets/less/service/locations-detail.less";
</style>
